<template>
  <div catchtouchmove="true" class="container-headnav">
    <div
      class="top-nav"
      :style="{
        height: statusBarHeight + 'px',
        backgroundColor: dataInfo.titleBackgroundColor,
        color: dataInfo.titleType === 10 ? '#ffffff' : '#000000'
      }">
      <div
        class="top-name-bar v-align-c"
        :class="{
          'flex-center': dataInfo.titleCenter === 10,
          'flex text-align-l': dataInfo.titleCenter === 11,
        }"
        :style="{
          'padding-top': statusBarTop + 'px',
          'height': barHeight + 'px',
          'background': dataInfo.titleBackgroundColor,
          'color': dataInfo.titleType === 10 ? '#ffffff' : '#000000'
        }">
        <div
          v-if="!dataInfo.searchFlag"
          :class="{
            'flex-center flex':dataInfo.titleCenter === 10,
            'flex-item v-align-c mar-l-13 mar-r-13':dataInfo.titleCenter === 11
          }">
          <img
            class="mar-r-8"
            :style="{
              'width': dataInfo.iconWidth ? (dataInfo.iconWidth / 2) + 'px' : '60px',
              'height': dataInfo.iconHeight ? (dataInfo.iconHeight / 2) + 'px' : '33px'
            }"
            v-if="dataInfo.iconUrl"
            :src="dataInfo.iconUrl"/>
          <label class="top-txt">{{ dataInfo.mpPageTitle ? dataInfo.mpPageTitle : '&nbsp;' }}</label>
        </div>
        <template v-else>
          <div class="flex-item">
            <img
              class="mar-r-8 mar-l-15"
              :style="{
                'width': dataInfo.iconWidth ? (dataInfo.iconWidth / 2) + 'px' : '60px',
                'height': dataInfo.iconHeight ? (dataInfo.iconHeight / 2) + 'px' : '33px'
              }"
              v-if="dataInfo.iconUrl"
              :src="dataInfo.iconUrl"/>
            <template v-else>&nbsp;</template>
          </div>
          <div
            :class="{'search-bar-w':dataInfo.titleType === 10}"
            class="search-anchor-bar flex-item flex-center pad-l-10 pad-r-10"
            :style="{height: wxMenuButtonH + 'px'}">  
            <div
              class="flex flex-center"
              :style="{height: wxMenuButtonH + 'px'}"
              @click="$pt.navigateTo({url: '/pages/home/search-view/main'})">
              <div class="flex v-align-c">
                <img
                  v-if="fileSpace"
                  class="width-13 height-13 mar-r-5"
                  :src="fileSpace + '/images/icon-search-8.png'"
                  alt="">
                {{ dataInfo.mpPageSearchTxt ? dataInfo.mpPageSearchTxt : '搜索商品' }}
              </div>
            </div>
          </div>
          <div class="flex-item">&nbsp;</div>
        </template>
      </div>
    </div>
    <div
      class="top-space"
      :style="{height: statusBarHeight + 'px'}"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0,
        statusBarTop: 0,
        searchTop: 0,
        barHeight: 0,
        wxMenuButtonH: 0
      }
    },
    props: {
      dataInfo: {
        type: Object,
        default: {}
      }
    },
    onLoad() {
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.barHeight = this.statusBarHeight - 2
      // 店铺信息栏
      this.statusBarTop = this.statusBarHeight - 45
      this.searchTop = this.statusBarHeight - 74
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      this.wxMenuButtonH = this.$pt.getMenuButtonBoundingClientRect().height - 1
      if (sysInfo.system.indexOf('iOS') === -1) {
        // android类型
        this.statusBarTop = this.statusBarHeight - 43
        this.searchTop = this.statusBarHeight - 80
        this.barHeight = this.statusBarHeight - 4
      }
    },
    onShow() {
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  // 顶部导航样式定义
  .search-anchor-bar{
    background: #ffffff;
    color: #666;
    border-radius: 100px;
    font-size: 12px;
    height: 32px;
  }
  .top-name-bar{
    box-sizing: border-box;
    overflow: hidden;
  }
  .user-bar{
    background: #fff;
    .avatar{
      width: 27px;
      height: 27px;
      border-radius: 50px;
      margin-right: 8px;
    }
    .icon-v{
      position: absolute;
      right: 4px;
      bottom: 0;
      width: 13px;
      height: 13px;
    }
    .dark-gray{
      color: #595959;
    }
  }
  .search-ri{
    background: #f5f5f5;
    color: #999;
    border-radius: 50px;
  }
  .back-btn{
    position: fixed;
    left: 5px;
    top: 28px;
    width: 40px;
    height: 40px;
    z-index: 101;
    .back-align{
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(-180deg);
    }
  }
  .top-pro-name{
    position: fixed;
    left: 8px;
    top: 28px;
    z-index: 101;
  }
  .top-back{
    position: fixed;
    left: 0px;
    top: 28px;
    z-index: 101;
    padding: 8px 10px 8px 7px;
    .iconfont{      
      font-size: 20px;
      font-weight: bold;
      transform:rotate(180deg);
    }
  }
  .top-nav{
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    .top-txt{
      font-size: 15px;      
      .txt-min{
        max-width: 90px;
        height: 24px;
        line-height: 1.3;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
    }
    .iconfont{
      margin-top: 3px;
      margin-left: 3px;
      font-size: 15px;
      transform:rotate(90deg);
      &.icon-next{
        margin-top: 0px;
        margin-left: 3px;
        font-size: 15px;
        transform:rotate(0deg);
        color: #292929;
      }
    }
  }
  .top-space{
    height: 64px;
  }
</style>
